<template>
<el-container>
  <el-header>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="职位">
        <el-input v-model="form.title" placeholder="职位"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="选择状态">
          <el-option :label="vo" :value="k" v-for="(vo,k) in job.statusList" :key="k"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-header>
  <el-main>
    <el-table
      :data="job.jobList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="auth"
        label="权限">
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">

          <div class="frow fcenter" style="align-items: flex-end;">
            <div><el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button></div>
            <div style="margin-left: 10px;"> <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
          </div>


        </template>
      </el-table-column>

    </el-table>

    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10,20,30]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="job.total">
      </el-pagination>
    </el-footer>

  </el-main>
</el-container>
</template>

<script>
  import {mapActions,mapState} from 'vuex'
export default {
  name: "setJob",
    data(){
      return {
          form: {
              title: '',
              status: '',
              page: 1,
              pagesize: 10,
          },
          status_list: [],
          jobList: [],
      }
    },
    computed:{
      ...mapState("Setdata",["job"]),
    },
    methods:{
      ...mapActions("Setdata",["getJobListAction"]),
       //搜索
        onSubmit(){
            this.getJobListAction(this.form)
        },
        handleSizeChange(val){
          this.form.pagesize = val
          this.getJobListAction(this.form)
        },
        handleCurrentChange(val){
          this.form.page = val
          this.getJobListAction(this.form)
        },
        handleEdit(i,row){
            console.log(row.id)
        },

        handleDelete(i,row){

        }

    },
}
</script>

<style scoped>

</style>
